<template>
  <div class="commentList">
    <div class="evaluateList">
      <div class="score">
        <p>
          <span>{{ evaluateValue }}</span>
          <span>分</span>
        </p>
        <van-rate
          v-model="evaluateValue"
          :size="14"
          color="#ffd21e"
          void-icon="star"
          void-color="#eee"
        />
      </div>
      <ul class="scoreList">
        <li v-for="item in evaluateValueList" :key="item">
          <div>{{ item.value }}</div>
          <div>{{ item.name }}</div>
        </li>
      </ul>
    </div>
    <template v-if="commentList.length">
      <ul class="commentList">
        <li v-for="(item, index) in commentList" :key="item.id">
          <div class="headerInfo">
            <div class="headerPic">
              <van-image
                round
                width="48px"
                height="48px"
                :src="`https://api.dicebear.com/7.x/miniavs/svg?seed=${index+1}`"
              />
              <div>
                <p>小明</p>
                <p>{{ item.createTime }}</p>
              </div>
            </div>
<!--            <div class="headerScore">-->
<!--              <van-icon name="star" color="#ffc600" />-->
<!--              <span>4.6</span>-->
<!--            </div>-->
          </div>
          <div class="evaluateInfo">
            {{ item.evaluateRemark }}
          </div>
          <van-space>
            <van-image
              v-for="jItem in item.picFile"
              :key="jItem.id"
              :src="jItem.url"
              width="100px"
              height="100px"
              fit="cover"
            />
          </van-space>
        </li>
      </ul>
    </template>
    <van-empty v-else description="暂无评论" />
    <van-floating-bubble
      @click="handleComment"
      class="my-van-floating-bubble"
      axis="xy"
      magnetic="x">
      <div class="postComment">
        <van-icon name="edit" />
        <span>发布评论</span>
      </div>
    </van-floating-bubble>
  </div>
</template>
<script setup>
import { evaluateList, evaluateAdd  } from "@/api/homePage.js";
const props = defineProps({
  merchantId: String,
  merchantInfo: Object
});

const { taste, service, costEffectiveness, environment, score, scoreNum } = props.merchantInfo;
const evaluateValue = ref(score);
const evaluateValueList = ref([
  { name: '口味', value: taste },
  { name: '服务', value: service },
  { name: '性价比', value: costEffectiveness },
  { name: '环境', value: environment },
])

//获取用户评价列表
onMounted(() => { getCommentList() })
const commentList = ref([]);
const getCommentList = async () => {
  const res = await evaluateList({
    merchantId: props.merchantId,
  });
  commentList.value = res.rows.filter(item => item.state === "1");
};

//去评论
import { useUserStore } from '@/stores/user.js';
const store = useUserStore()

import { useRouter } from 'vue-router';
const router = useRouter();

const handleComment = () => {
  if (store.token) {
    router.push({
      name: 'commentPage',
      query: {
        id: props.merchantId,
        name: props.merchantInfo.name,
        logo: props.merchantInfo.logoFile.url,
      },
    });
  }else {
    router.push({
      name: 'loginTypePage',
      query: { id: props.merchantId }
    });
  }
}
</script>
<style lang="less" scoped>
div.commentList {
  >div.evaluateList {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .score {
      flex-basis: 50%;
      p {
        span:nth-child(1) {
          font-size: 18px;
          font-weight: bold;
          color: #000000;
          margin-right: 4px;
        }
        span:nth-child(2) {
          font-size: 12px;
        }
      }
    }
    .scoreList {
      flex-basis: 50%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      li {
        div {
          text-align: center;
          &:first-child {
            font-size: 14px;
            font-weight: bold;
            color: #000000;
          }
          &:last-child {

          }
        }
      }
    }
  }
  >ul.commentList{
    li{
      border-radius: 20px;
      background: #fff;
      padding: 12px;
      box-sizing: border-box;
      &:not(:last-child){
        margin-bottom: 12px;
      }
      .headerInfo {
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .headerPic {
          display: flex;
          align-items: center;
          justify-content: start;
          >div {
            p {
              margin: 0;
              &:first-child {
                margin-top: 10px;
              }
            }
          }
        }
        .headerScore {
          display: flex;
          align-items: center;
        }
      }
      .evaluateInfo {
        margin-bottom: 12px;
      }
    }
  }
}
</style>
<style lang="less">
.my-van-floating-bubble {
  width: 110px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  background: #020000;
  border-radius: 29px;
  div.postComment {
    span, van-icon {
      font-weight: bold;
      font-size: 14px;
      color: #ffffff;
    }
  }
}
</style>
